<template>
  <form action="" style="margin: 20px;">
    <p @click="tag" :style="{ width: w, height: h, backgroundColor: bgc }"></p>
    <input type="button" value="红" @click="tag('red')" />
    <input type="button" value="黄" @click="tag('yellow')" />
    <input type="button" value="蓝" @click="tag('blue')" />
  </form>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  setup() {
    const state = reactive({
      h: "200px",
      w: "200px",
      bgc: "red",
    });
    const tag = (b) => (state.bgc = b);
    return {
      ...toRefs(state),
      tag,
    };
  },
};
</script>

<style lang="scss" scoped></style>
